<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<%@ include file="../common/header.jsp" %>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Change Password</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/axios.min.js"></script>
</head>
<body>
<main>
    <%
        if (request.getSession().getAttribute("user") != null) {
    %>

        <h1>Change Password</h1>

        <form method="post">
            <label for="oldPassword">Old Password:</label>
            <input type="password" id="oldPassword" name="oldPassword" required><br><br>

            <label for="newPassword">New Password:</label>
            <input type="password" id="newPassword" name="newPassword" required><br><br>

            <label for="confirmPassword">Confirm Password:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required><br><br>

            <input type="submit" value="Submit">
        </form>
    <%
        } else {
            response.sendRedirect("login.jsp");
        }
    %>


</main>
</body>
<%@ include file="../common/footer.jsp" %>
<script>
    const form = document.querySelector('form');
    // 监听表单提交事件
    form.addEventListener('submit', function (event) {
        // 获取表单元素

        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        console.log(newPassword)
        console.log(confirmPassword)
        event.preventDefault(); // 阻止表单的默认提交行为

        if (oldPassword == "" || newPassword == "" || confirmPassword == "") {
            alert("请填写所有字段");
            return false;
        }

        if (newPassword != confirmPassword) {
            alert("两次密码不一致");
            return false;
        }

        // 构造请求数据
        const data = {
            username: '${sessionScope.user.username}',
            oldPassword: oldPassword,
            newPassword: newPassword,
            confirmPassword: confirmPassword
        };

        // 发送POST请求
        axios.post('/updatePassword', data)
            .then(function (response) {
                // 处理响应数据
                // console.log(response)
                alert(response.data.msg);
                window.location.href = '/user/login.jsp'; // 重定向到登录页面
            })
            .catch(function (error) {
                // 处理请求错误
                // console.log(error)
                alert(error.data.msg);
            });
    });

</script>
<style>
    /* 设置页面背景色为灰色 */
    body {
        background-color: #f2f2f2;
    }

    /* 将主标题字体加粗并居中 */
    h1 {
        text-align: center;
        font-weight: bold;
    }

    /* 设置表单样式 */
    form {
        max-width: 500px;
        margin: auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    }

    /* 设置表单输入框样式 */
    input[type="password"] {
        width: 90%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
    }

    /* 设置表单提交按钮样式 */
    input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width: 50%;
        margin-top: 10px;
        margin-left: 25%;
    }

    /* 鼠标悬停时，提交按钮背景颜色变化 */
    input[type="submit"]:hover {
        background-color: #45a049;
    }

</style>

</html>


